<template>
  <!--向导-->
  <el-steps :active="active" finish-status="success">
    <el-step
      v-for="(item, index) in cardOrder"
      :key="index"
      :title="item.title"
    >
    </el-step>
  </el-steps>
  <!--表单-->
  <el-form
    ref="refControl"
    class="demo-form-inline"
    v-bind="$attrs"
    :model="model"
    :inline="false"
    :label-suffix="labelSuffix"
    :label-width="labelWidth"
  >
    <el-card class="box-card" style="margin-bottom: 10px;"
      v-for="(item, index) in cardOrder"
      :key="index"
      v-show="active === index"
    >
      <template #header>
        <div class="card-header">
          <span>{{item.title}}</span>
        </div>
      </template>
      <base-item :colOrder="item.colIds" ></base-item>
    </el-card>    
  </el-form>
  <el-button type="" @click="next">下一步</el-button>
</template>

<script setup lang="ts" generic="T extends object">
/* eslint-disable vue/no-setup-props-destructure */
  import { ref, onMounted } from 'vue'
  // 封装 el-form-item
  import baseItem from './base-item.vue'

  // 表单控件的属性 
  import { formController, myExpose } from '../map'
  // 表单组件的接口
  import type { IFromProps } from '../map'

  defineOptions({
    name: 'nf-el-from-step',
    inheritAttrs: false,
  })

  const props = withDefaults(defineProps<IFromProps<T>>(), {
    labelSuffix: '：',
    labelWidth: '130px'
  })
 
  // console.log('表单控件的props：', props)

  // 获取 $ref
  const { refControl, expose } = myExpose()
  // 暴露 el-form
  defineExpose({ expose })

  formController(props)

  const { subMeta } = props.formMeta // 解构表单的meta，得到 colOrder、itemMeta 等。
       
  // 获取分栏信息
  const cardOrder = subMeta.cols ?? []
  
  // tab 
  const active = ref(0)

  const next = () => {
    active.value ++
    if (active.value >= cardOrder.length ) {
      active.value = 0
    }
  }
 
</script>